'use client';
import ReactEChartsCore from 'echarts-for-react/lib/core';
import * as echarts from 'echarts/core';
import type EChartsReact from 'echarts-for-react';
import {
	Lines3DChart,
	// LinesGLChart,
	Scatter3DChart
	// ScatterGLChart
} from 'echarts-gl/charts';
import { LegendComponent } from 'echarts/components';
import { GlobeComponent } from 'echarts-gl/components';
import earthImg from './earth@2x.png';
import starImg from './starfield.jpg';
import { useMemo, useRef } from 'react';
import {
	CanvasRenderer
	// SVGRenderer,
} from 'echarts/renderers';
import { useGlobeData } from '../../hooks/useGlobeData';

echarts.use([
	CanvasRenderer,
	Lines3DChart,
	Scatter3DChart,
	// Grid3DComponent,
	GlobeComponent,
	LegendComponent
]);

export function GlobeChart(props: { boxStyle?: React.CSSProperties }) {
	const { data } = useGlobeData();
	const routes = useMemo(() => {
		if (!data?.earthObj) return [];
		const start = [data?.earthObj.longitude, data?.earthObj.latitude];

		const seawayRoutes = data?.earthObj.countryObjList
			.filter(i => i.lineType == '1')
			.map(i => ({
				coords: [start, [i.longitude, i.latitude]],
				name: i.name,
				val: i.quantity
			}));
		const airRoutes = data?.earthObj.countryObjList
			.filter(i => i.lineType == '2')
			.map(i => ({
				coords: [start, [i.longitude, i.latitude]],
				name: i.name,
				val: i.quantity
			}));
		return [seawayRoutes, airRoutes];
	}, [data?.earthObj]);

	const options = useMemo(() => {
		return {
			legend: {
				// selectedMode: 'single',
				left: 30,
				bottom: 40,
				zlevel: 11,
				data: [
					{
						name: '海运航线',
						icon: 'circle',
						itemStyle: {
							color: 'RGBA(117, 178, 223, 1)',
							borderWidth: 0
						}
					},
					{
						name: '空运航线',
						icon: 'circle',
						itemStyle: {
							color: '#E28F25',
							borderWidth: 0
						}
					}
				],
				orient: 'vertical',
				textStyle: {
					color: '#fff'
				}
			},
			globe: {
				baseTexture: earthImg.src,
				environment: starImg.src,
				// heightTexture:
				// 	'https://p.sda1.dev/14/34783014d18f1a0f75f23c54a62618b2/earth.jpg',
				// top: 120,
				shading: 'color',
				baseColor: '#fff',
				globeRadius: 70,
				globeOuterRadius: 100,
				viewControl: {
					autoRotate: true,
					targetCoord: [120.0747, 29.3056],
					center: [0, 20, 0]
					// alpha: 90,
					// beta: 90,
				},
				temporalSuperSampling: {
					enable: true
				},

				silent: true,
				atmosphere: {
					show: true,
					color: 'RGBA(24, 100, 158, 1)',
					innerGlowPower: 6,
					glowPower: 2,
					offset: 2
				}
			},
			series: [
				{
					type: 'lines3D',
					coordinateSystem: 'globe',
					blendMode: 'lighter',
					lineStyle: {
						width: 5,
						color: 'RGBA(117, 178, 223, 1)',
						// opacity: 0
					},
					effect: {
						show: true,
						trailWidth: 5,
						trailLength: 0.15,
						trailOpacity: 1

						// trailColor: 'rgb(30, 30, 60)'
					},
					name: '空运航线',
					data: routes[1]?.map(i => i.coords) || []
				},
				{
					type: 'lines3D',
					coordinateSystem: 'globe',
					blendMode: 'lighter',
					lineStyle: {
						width: 5,
						color: 'RGBA(117, 178, 223, 1)'
						// opacity: 0.1
					},
					effect: {
						show: true,
						trailWidth: 5,
						trailLength: 0.15,
						trailOpacity: 1

						// trailColor: 'rgb(30, 30, 60)'
					},
					name: '海运航线',
					data:
						routes[0]?.map(i => {
							return {
								coords: i.coords,
								name: i.name,
								val: i.val,
								lineStyle: {
									color: '#E28F25'
								}
							};
						}) || []
				},
				{
					type: 'scatter3D',
					coordinateSystem: 'globe',
					blendMode: 'lighter',
					symbolSize: 10,
					zlevel: 10,
					label: {
						show: true,
						formatter: v => {
							return `${v.data.name} ${v.data.val || 0}`;
						},
						color: '#fff',
						// borderColor: '#5983AE',
						// borderWidth: 1,
						fontSize: 16,
						distance: 30,
						position: 'top'
					},
					itemStyle: {
						color: '#2F95D7',
						opacity: 1
					},

					data: [
						{
							name: '义乌',
							value: [120.0747, 29.3056],
							itemStyle: {
								color: '#fff'
							},
							label: {
								color: '#F5654E',
								fontSize: 24,
								formatter: v => {
									return `${v.data.name}`;
								}
							}
						},
						...(routes[0]?.map(i => ({
							name: i.name,
							val: i.val,
							value: i.coords[1],
							itemStyle: {
								color: '#E28F25'
							}
						})) || []),
						...(routes[1]?.map(i => ({
							name: i.name,
							val: i.val,
							value: i.coords[1]
						})) || [])
					]
				}
			]
		};
	}, [routes]);

	const chartRef = useRef<EChartsReact>(null);
	return (
		<div
			style={{
				position: 'relative',
				width: '100%',
				height: '100%',
				...props.boxStyle
			}}
		>
			<ReactEChartsCore
				ref={chartRef}
				echarts={echarts}
				option={options}
				notMerge={true}
				lazyUpdate={true}
				style={{
					width: '100%',
					height: '100%'
				}}
			/>
		</div>
	);
}

